<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05-css位置设置案例</title>
		<style>
			.goods-item {
				height: 390px;
				width: 250px;
			}
			
			.goods-item:hover{
				border: 1px solid red;
			}

			.goods-item .goods-item-hd a {
				display: block;
				width: 250px;
				height: 250px;
				background: url(../images/cloth.jpg);
				background-size: 250px 250px;
			}

			.price {
				position: relative;
				margin-top: 10px;
				padding: 0px 10px;
				font-family: arial;
				height: 20px;
				line-height: 20px;
			}

			.price .price-highlight {
				font-size: 18px;
				float: left;
				color: #ff4400;
			}

			.price .deal-cnt {
				float: right;
				color: #888;
				font-size: 12px;
			}
			
			.price .freeIcon{
				position: absolute;
				top: 3px;
				left: 80px;
				width: 27px;
				height: 14px;
				background: pink;
				background: url(../images/taobao.png) -42px -139px;
			}

			.goods-info {
				font-size: 12px;
				margin-top: 10px;
				padding: 0px 10px;
			}

			.goods-info a {
				text-decoration: none;
				color: #3d3d3d;
			}

			.goods-info a:hover {
				text-decoration: underline;
			}

			.salor-info {
				height: 20px;
				line-height: 20px;
				margin-top: 5px;
				padding: 0 10px;
				font-size: 12px;
			}

			.salor-info .salor-name {
				float: left;
				color: #888888;
				text-decoration: underline;
			}
			
			.salor-info .salor-name a{
				color: #888888;
			}
			
			.salor-info .salor-name a:hover{
				color: #ff4400;
			}

			.salor-info .salor-name .dsrs {
				margin-top: 4px;
				width: 13px;
				float: left;
			}

			.salor-info .salor-name .dsr {
				float: left;
				margin-top: 2px;
				height: 2px;
				width: 8px;
				overflow: hidden;
			}

			.salor-info .salor-name .morethan {
				background: #f40;
			}
			
			.salor-info .salor-name .lessthan{
				background: #00ba97;
			}

			.salor-info .addr {
				float: right;
				color: #888;
			}
			
			.bottom{
				margin-top: 10px;
				padding: 0 10px;
			}
			
			.bottom .icon-remai{
				float: left;
				width: 49px;
				height: 16px;
				background: url(../images/taobao.png) -5px -113px;
			}
			
			.bottom .icon-tianmao{
				float: left;
				height: 16px;
				width: 16px;
				background: url(../images/taobao.png) -213px -199px;
				margin-left: 4px;
			}
		</style>
	</head>
	<body>

		<div class="goods-item">
			<div class="goods-item-hd">
				<a href="#"></a>
			</div>
			<div class="goods-item-body">
				<div class="price">
					<div class="price-highlight">
						<span>￥</span>
						<strong>69.00</strong>
					</div>
					<div class="deal-cnt">
						252人付款
					</div>
					<div class="freeIcon"></div>
				</div>
				<div class="goods-info">
					<a href="#">美式复古t恤vintage骨骼印花宽松os嘻哈短袖男女hiphop高街半袖潮</a>
				</div>
				<div class="salor-info">
					<div class="salor-name">
						<span class="dsrs">
							<span class="dsr morethan"></span>
							<span class="dsr morethan"></span>
							<span class="dsr lessthan"></span>
						</span>
						<span><a href="">欧顿堡旗舰店</a></span>
					</div>
					<div class="addr">河北&nbsp;石家庄</div>
				</div>
				<div class="bottom">
					<div class="icon-remai"><a href=""></a></div>
					<div class="icon-tianmao" title="上天猫,就够了"></div>
				</div>
			</div>
		</div>

	</body>
</html>
